<!DOCTYPE html>
<!-- saved from url=(0047)https://s3.envato.com/files/87575523/demo2.html -->
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>CCSlider</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link href="./CCSlider2_files/css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="./CCSlider2_files/reset.css">
	<link rel="stylesheet" href="./CCSlider2_files/ccslider.css">
	<link rel="stylesheet" href="./CCSlider2_files/style.css">

	<style type="text/css">
		body {
			width: 100%;
			max-width: 1000px;
		}

		#slider {
			width: 1000px;
			height: 450px;
			margin-bottom: 120px;
		}

		#slider:after {
			content: '';
			position: absolute;
			bottom: -17.77%;  /* -80px */
			left: 0;
			max-width: 1000px;
			width: 100%;
			max-height: 171px;
			height: 38%;
			background: url('images/stand.png') no-repeat;
			background-size: 100% 100%;
		}

		#slider .control-links {
			margin-top: -40px;
		}

		#slidehtml1 h3, #slidehtml2 h3{
			font: bold 30px 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			color: #fd5;
			text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
			width: 280px;
			margin: 7% 0 1% 4.5%; /* 60px 0 20px 40px */
		}

		#slidehtml1 p, #slidehtml2 p {
			font: 20px 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			color: #fff;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
			width: 280px;
			margin: 0 0 1.5% 4.5%;  /* 0 0 10px 40px */
		}

		#slidehtml1 strong {
			font-weight: bold;
			color: #ffd633;
			margin-left: 10px;
			position: relative;
		}

		#slidehtml2 a {
			display: block;
			width: 120px;
			height: 30px;
			border: 1px solid #aaa;
			background-color: #444444;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#141414)); /* Saf4+, Chrome */
			background-image: -webkit-linear-gradient(top, #646464, #141414); /* Chrome 10+, Saf5.1+, iOS 5+ */
			background-image:    -moz-linear-gradient(top, #646464, #141414); /* FF3.6 */
			background-image:     -ms-linear-gradient(top, #646464, #141414); /* IE10 */
			background-image:      -o-linear-gradient(top, #646464, #141414); /* Opera 11.10+ */
			background-image:         linear-gradient(top, #646464, #141414);
			color: #fff;
			font: 16px/30px 'Helvetica Neue', Helvetica, Arial, sans-serif;;
			text-align: center;
			text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7);
			margin: 2% 0 0 4.5%;  /* 20px 0 0 40px */
			cursor: pointer;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
			border-radius: 20px;
			-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
			-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
		}

		#demo-description {
			max-width: 900px;
			width: 90%;
			margin: 60px auto;
			color: #fff;
			font: 20px 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
		}
	</style>

	<!--[if lt IE 8]>
		<script src="https://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
	<![endif]-->

	<!--[if lt IE 9]>
		<style type="text/css">
			.slider-caption {
				background: transparent;
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF)"; /* IE8 */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF);   /* IE6 & 7 */
				zoom: 1;
			}
		</style>

		<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->


</head>
<body>


	<header>
		<hgroup>
			<h1 id="title"><img src="./CCSlider2_files/title.png" alt="ccslider"></h1>
			<h2 id="subtitle">The slider that opens a new dimension</h2>
		</hgroup>

		<nav id="demo-nav">
			<ul>
				<li><a href="https://s3.envato.com/files/87575523/index.html">Demo 1</a></li>
				<li class="active"><a href="https://s3.envato.com/files/87575523/demo2.html">Demo 2</a></li>
				<li><a href="https://s3.envato.com/files/87575523/demo3.html">Demo 3</a></li>
				<li><a href="https://s3.envato.com/files/87575523/demo4.html">Demo 4</a></li>
				<li><a href="https://s3.envato.com/files/87575523/demo5.html">Demo 5</a></li>
			</ul>
		</nav>
	</header>

	<div id="slider" class="ccslider" style="background: none transparent;"><div class="slider-innerWrapper" style="display: none;">
		<img src="./CCSlider2_files/toy-story1.jpg" data-htmlelem="#slidehtml1" data-transition="{&quot;slices&quot;: 9, &quot;animSpeed&quot;: 1200, &quot;delay&quot;: 100, &quot;delayDir&quot;: &quot;fromCentre&quot;, &quot;depthOffset&quot;: 300, &quot;sliceGap&quot;: 30}">
		<img src="./CCSlider2_files/panda1.jpg" alt="" data-htmlelem="#slidehtml2" data-transition="{&quot;slices&quot;: 5, &quot;easing&quot;: &quot;easeInOutSine&quot;, &quot;delay&quot;: 200}">
		<img src="./CCSlider2_files/up2.jpg" alt="" data-transition="{&quot;slices&quot;: 15, &quot;animSpeed&quot;: 3000, &quot;easing&quot;: &quot;easeInOutElastic&quot;, &quot;delay&quot;: 30, &quot;depthOffset&quot;: 200, &quot;sliceGap&quot;: 10}">
		<img src="./CCSlider2_files/shrek.jpg" alt="" data-transition="{&quot;slices&quot;: 5, &quot;delay&quot;: 200, &quot;delayDir&quot;: &quot;toCentre&quot;}">
		<img src="./CCSlider2_files/wall-e.jpg" alt="" data-transition="{&quot;slices&quot;: 3, &quot;animSpeed&quot;: 1300, &quot;delay&quot;: 100, &quot;depthOffset&quot;: 500, &quot;sliceGap&quot;: 50}">
		<img src="./CCSlider2_files/panda2.jpg" alt="" data-transition="{&quot;slices&quot;: 5, &quot;delay&quot;: 200, &quot;easing&quot;: &quot;easeInOutBack&quot;, &quot;delayDir&quot;: &quot;last-first&quot;}">
	</div><a class="slider-nav prev" style="left: 33px;"></a><a class="slider-nav next" style="right: 33px;"></a><ul class="control-links"><li data-index="0" class="active">1</li><li data-index="1">2</li><li data-index="2">3</li><li data-index="3">4</li><li data-index="4">5</li><li data-index="5">6</li></ul><div class="slider-timer pause" style="right: 70px; top: 70px;"></div><div class="slider-caption"></div><div class="cc-htmlwrapper" style="display: block; width: 900px; height: 350px; left: 50%; top: 50%; margin-left: -450px; margin-top: -175px;"><div id="slidehtml1" class="cc-html" style="display: block;">
		<h3 style="display: block; position: relative; top: 0px;">Custom HTML</h3>

		<p style="display: block; position: relative; top: 0px;">Each slide can have a custom html content which you can animate <strong style="display: inline; left: 0px;">Anyway You Want</strong></p>
	</div><div id="slidehtml2" class="cc-html">
		<h3>API Functions</h3>

		<p>Manipulate the slideshow with helpful API functions.</p>
		<p>Click this button to go to the next slide</p>
		<a id="gotonext">Next Slide</a>
	</div></div><a class="slider-link" href="https://s3.envato.com/files/87575523/demo2.html" style="display: none; width: 900px; height: 350px; left: 50%; top: 50%; margin-left: -450px; margin-top: -175px;"></a><canvas class="draw" width="1000" height="450" style="z-index: 2;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 3;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 4;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 5;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 6;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 5;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 4;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 3;"></canvas><canvas class="draw" width="1000" height="450" style="z-index: 2;"></canvas></div>

	

	



	<p id="demo-description">
		In this slideshow the effects randomly change between all the available 3d effects. Also on each slide what number of slices, animation speed, delay etc. are to be used, has been declared.
		The result is a very dynamic slideshow where not a single slide has the same transition because of all the various configured parameters. Just keep on watching the slideshow to verify this!
		Also the first two slides have custom HTML content which are animated with the help of the provided callback functions.
	</p>


	<script src="./CCSlider2_files/jquery.min.js.下载"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
	<script src="./CCSlider2_files/jquery-migrate-1.1.1.min.js.下载"></script>
	<script src="./CCSlider2_files/jquery.ccslider-3.0.2.min.js.下载"></script>
	<script>
		$(function(){
			$('#demo-nav').find('a').tooltip({effect: 'slide'});
		});

		$(window).load(function(){
			$('#slider').ccslider({
				effect: 'random',
				_3dOptions: {
					imageWidth: 900,
					imageHeight: 350,
					makeShadow: false
				},
				beforeSlideChange: function(index) {
					$(this).find('div.cc-html').children().hide();
				},
				afterSlideChange: function(index) {
					if( index === 0 ) {
						var children = $('#slidehtml1').children();
						children.css({ position: 'relative', top: '-20px'});
						children.filter('h3').animate({ top: 0, opacity: 'toggle'}, 600);
						children.filter('p').eq(0).delay(100).animate({ top: 0, opacity: 'toggle'}, 600);
						children.find('strong').hide().css('left', '50px').delay(300).animate({ left: 0, opacity: 'toggle'}, 600);
					}
					if(index === 1) {
						var children = $('#slidehtml2').children();
						children.css({ position: 'relative', left: '-300px'});
						children.filter('h3').animate({ left: 0, opacity: 'toggle'}, 600);
						children.filter('p').delay(100).animate({ left: 0, opacity: 'toggle'}, 600);
						children.filter('a').delay(200).animate({ left: 0, opacity: 'toggle'}, 600);
					}
				}
			});

			// animation for html content of first slide on page load
			var children = $('#slidehtml1').children().hide();
			children.css({ position: 'relative', top: '-20px'});
			children.filter('h3').animate({ top: 0, opacity: 'toggle'}, 600);
			children.filter('p').eq(0).delay(100).animate({ top: 0, opacity: 'toggle'}, 600);
			children.find('strong').hide().css('left', '50px').delay(300).animate({ left: 0, opacity: 'toggle'}, 600);

			// use ccslider api to go to next slide
			var api = $('#slider').data('ccslider');
			$('#slidehtml2').find('a').click(function(){
				api.next();
			});
		});
	</script>


</body></html>